<template>
  <el-form ref="singupform" :model="singupform" :rules="singuprules">
    <h1>注册</h1>
    <el-form-item prop="username">
      <el-input
        type="text"
        v-model="singupform.username"
        autofocus="true"
        placeholder="输入用户名"
      ></el-input>
    </el-form-item>
    <el-form-item prop="email">
      <el-input
        type="text"
        v-model="singupform.email"
        autofocus="true"
        placeholder="输入邮箱地址"
      >
        <el-button v-show="sendAuthCode" @click="send" slot="append"
          >验证码</el-button
        >
        <el-button slot="append" v-show="!sendAuthCode"
          >{{ auth_time }}秒</el-button
        >
      </el-input>
    </el-form-item>
    <el-form-item prop="code">
      <el-input
        type="type"
        v-model="singupform.code"
        placeholder="输入验证码"
      ></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        type="password"
        v-model="singupform.password"
        placeholder="输入密码"
      ></el-input>
    </el-form-item>
    <el-form-item prop="repassword">
      <el-input
        type="password"
        v-model="singupform.repassword"
        placeholder="确认密码"
      ></el-input>
    </el-form-item>
    <el-form-item>
      <el-button class="btn" type="primary" @click="handlesingup"
        >注册</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script>
import {
  register,
  emailvalidate,
  sendcode,
  usernamevalidate
} from "@/api/user";
import { validEmail } from "@/utils/validate";
export default {
  name: "Register",
  data() {
    const validateEmail = (rule, value, callback) => {
      if (!validEmail(value)) {
        callback(new Error("请输入合法的邮箱地址"));
      } else {
        emailvalidate(value).then(res => {
          if (res.code == 200) {
            callback();
          } else {
            callback(new Error(res.message));
          }
        });
      }
      callback();
    };
    const validateUsername = (rule, value, callback) => {
      usernamevalidate(value).then(res => {
        if (res.code != 200) {
          callback(new Error(res.message));
        } else {
          callback();
        }
      });
    };
    const validatePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.singupform.repassword !== "") {
          this.$refs.singupform.validateField("repassword");
        }
      }
      callback();
    };
    const validateRePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.singupform.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      sendAuthCode: true,
      auth_time: 0,
      singupform: {
        username: "",
        email: "",
        code: "",
        password: "",
        repassword: ""
      },
      singuprules: {
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
            validator: validateUsername
          }
        ],
        password: [
          { required: true, message: "请输入用户密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur"
          },
          { validator: validatePassword, trigger: "blur" }
        ],
        repassword: [
          { required: true, message: "请输入用户密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
            trigger: "blur"
          },
          { validator: validateRePassword, trigger: "blur" }
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱地址",
            trigger: "blur",
            validator: validateEmail
          }
        ]
      }
    };
  },
  methods: {
    handlesingup() {
      this.$refs["singupform"].validate(valid => {
        if (valid) {
          this.loading = true;
          register(this.singupform).then(res => {
            if (res.code == 200) {
              this.loading = false;
              this.$notify({
                title: "用户注册成功",
                type: "success"
              });
              this.$refs["singupform"].resetFields();
              this.signup = false;
              this.auth_time = 0;
            }
          });
        } else {
          console.log("error submit");
          return false;
        }
      });
    },
    send() {
      sendcode(this.singupform.email).then(res => {
        if (res.code === 200) {
          this.sendAuthCode = false;
          this.auth_time = 60;
          var auth_timetimer = setInterval(() => {
            this.auth_time--;
            if (this.auth_time <= 0) {
              this.sendAuthCode = true;
              clearInterval(auth_timetimer);
            }
          }, 1000);
          this.$message({
            message: res.message,
            type: "success"
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.btn {
  background: linear-gradient(120deg, #3498db, #8e44ad);
  background-size: auto;
  border: none;
  color: #fff;
  background-size: 200%;
  padding: 12px 45px;
  letter-spacing: 10px;
}
</style>
